import React, { Component } from 'react';
import {connect} from 'react-redux'
import moment from 'moment'
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import {
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
  message,
  Modal,
  Popover,
  Spin,
  DatePicker
} from 'antd';

// 引入自定义的组件
// 引入自定义操作
import { ChangeUserinfoActivate, UpdateUserInfoSaga } from '../../../../redux/actions/userinfo'

import { ChangeSpinACtivate } from '../../../../redux/actions/public';


const { Option } = Select;

// 类似样式，调节方框的距离
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

class UpdateUserInfoForm extends Component {

  // 点击修改按钮
  onFinish = (values) => {
    const { baseUserInfoState, userLoginState, UpdateUserInfoSaga, ChangeSpinACtivate, SpinState } = this.props
    const user_info = Object.assign(
      {}, 
      values, 
      {
        username: baseUserInfoState.username,
        oldEmail: baseUserInfoState.email
      })

      UpdateUserInfoSaga(user_info)
  };

  // 钩子
  componentDidMount(){
    const { userinfoState, ChangeUserinfoActivate, baseUserInfoState } = this.props
    // this.props.ChangeSpinACtivate({sendTask_activate: false})
  }


  render(){
    const { SpinState, baseUserInfoState, UpdateTaskMMPState } = this.props
    return (
      <Form
        {...formItemLayout}
        name="task"
        onFinish={this.onFinish}
        scrollToFirstError
      >
        <Form.Item
          name="email"
          label="用户邮箱"
          initialValue={baseUserInfoState.email}
          rules={[
            {
                type: 'email',
                message: '请输入正确的邮箱格式!',
            },
            {
              required: true,
              message: '请输入邮箱!',
            },
            {
                max: 100,
                message: '您输入的邮箱过长，请限定在100个字符',
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="nickname"
          label="用户昵称"
        //   tooltip="您希望大家怎么称呼您呢？"
          initialValue={baseUserInfoState.nickname}
          rules={[
            {
                required: true,
                message: '请输入您的昵称!',
                whitespace: true,
              },
              {
                max: 100,
                message: '您输入的昵称过长，请限定在100个字符',
              },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="userintro"
          label="自我介绍"
          initialValue={baseUserInfoState.userintro}
          
        >
          <Input.TextArea showCount maxLength={200} />
        </Form.Item>

        <Form.Item 
            name="gender"
            label="用户性别"
            initialValue={baseUserInfoState.gender}
            rules={[
                {
                    required: true,
                    message: '请输入您的性别!',
                },
              ]}
        >
            <Select placeholder="您的性别">
            <Option value="男">男</Option>
            <Option value="女">女</Option>
            <Option value="其他">其他</Option>
          </Select>
        </Form.Item>
        <Spin spinning={ SpinState.sendTask_activate } tip="信息修改中......">
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    );
  }
};

export default connect(
  state => ({
    SpinState: state.PublicReducer.spinState,
    baseUserInfoState: state.PublicReducer.baseUserInfo,
    userLoginState: state.PublicReducer.userLoginState,
    userinfoState: state.UserInfoReducer.userinfo,

    UpdateTaskMMPState: state.TaskMasterManagePageReducer.updateTask,
  }),
  {
    ChangeUserinfoActivate,
    ChangeSpinACtivate,

    UpdateUserInfoSaga,
  }
)(UpdateUserInfoForm) 